<template>
	<div class="contextmenu col t" :style="{left:menu.left + 'px',top:menu.top + 'px'}" v-show="menu.isShow">
		<div @click="onClick(item)" :class="{'contextmenu-row row':item.text!='','contextmenu-sp':item.text==''}" v-for="item in menu.options">
			<img class="contextmenu-img" v-if="item.text != ''" :src="item.img" draggable="false" />
			<div class="contextmenu-txt" >{{item.text}}</div>			
			<!--<hr style="height:0.5px;border:none;background-color:black;"  v-if="item.text == ''" />-->
		</div>
	</div>
</template>

<script>
	{
		name: 'contextmenu',
		data: function() {return {
			w:wnds,
			menu:{}
		}},
		methods: {
			onClick:function(item){
				item.onClicked()
				this.menu.hide()
			}
		},
		created: function() {
			var me = this
			this.menu={
				options:[],				
				isShow:false,
				top:100,
				left:100,
				show:function(e,op){					
					this.top = e.y
					this.left = e.x
					if(op){
						this.options = op					
					}
					this.isShow = true
					var that = this					
					Vue.nextTick(function(){					
						var bound = me.$el.getBoundingClientRect()
						var bodybound = document.body.getBoundingClientRect()
						if(bound.right > bodybound.right){
							that.left -= bound.right - bodybound.right
						}
						if(bound.bottom > bodybound.bottom){
							that.top -= bound.bottom - bodybound.bottom
						}						
					})
				},
				hide:function () {
					this.isShow = false
					this.options = []
				}
				
			}
			Vue.menu = this.menu
		}
	}
</script>

<style>
	.contextmenu{
		position: absolute;
		/*width:-webkit-fit-content;*/
		width: auto;
		height:auto;
		border: #D0CDC4 solid thin;				
		background: white;
		align-content: flex-start;
		align-items: flex-start;
		padding: 3px;
		/*box-shadow: 0px 0px 2px 1px rgba(0,0,0,0.2);*/		
		background-color: #F5F5F5;		
	}
	.contextmenu-img{
		width: 16px;
		height: 16px;
		margin: 0 5px;
		border: none;
	}	
	.contextmenu-txt{
		width: 120px;
		padding-left: 5px;
		text-align: left;
		font-size: 12px;
		justify-content: flex-start;
		border-left: #D0CDC4 solid thin;
	}	
	.contextmenu-row{
		height: 25px;		
	}
	.contextmenu-row:hover{
		background-color: white;			
	}	
	.contextmenu-sp{
		height: 1px;
	}
	.contextmenu-sp > div{
		height: 0.5px;
		background-color: #D0CDC4;
		margin-left: 26px;
	}
	
</style>